<template>
	<view class="account">
		<view class="account-top">
			<view class="contenttop">
				<text>{{ listtop.title }}</text>
				<text>{{ listtop.num }}</text>
			</view>
			<view class="contentwrap">
				<view class="content" v-for="item in list" :key="item.title">
					<text>{{ item.title }}</text>
					<text>{{ item.num }}天</text>
				</view>
			</view>
		</view>
		<view class="btn">
			<button type="default">续费</button>
		</view>
		<view class="box-bot">
			<text class="hhh">温馨提示:</text>
			<text>温馨，指温柔甜美;温暖馨香。提示，指给予提醒和解释。温馨提示，即温柔地给予友好的提醒和解释，常用于公共场合用以提醒<br>温馨提示，即温柔地给予友好的提醒和解释，常用于公共场合用以提醒人们某方面的事情，如餐厅饭店提醒顾客不要忘记随身物品等。 造句：<br><br>1、护士节温馨提示：笑口常开开心永保持，坚持锻炼炼就好身姿，营养均衡合理配膳食，充分睡眠优化作息时。我愿做你守望健康的小护士。<br><br> 2、世界糖尿病日，温馨提示告知：忌烟忌酒，合理饮食；学会放松，信心保持；定期检查，血糖血脂；生活规律，劳逸张弛；适当锻炼，健康一直！</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listtop: {
						title: "账号",
						num: "183 8662 1585"
					},
				list: [
					
					{
						title: "管理设备",
						num: "100/2"
					},
					{
						title: "剩余天数",
						num: "12"
					},
				]
			};
		}
	}
</script>

<style lang="less">
.account{
	width: 100%;
	.box-bot{
		width: 90%;
		margin: 40rpx auto;
		.hhh{
			font-size: 40rpx;
			display: block;
			color: #000000;
		}
		text{
			color: #666666;
		}
	}
	.btn{
		margin-top: 40rpx;
		button{
			width: 550rpx;
			height: 90rpx;
			background: linear-gradient(-45deg, #0180FF 0%, #369BFF 100%);
			border-radius: 8rpx;
			color: #FFFFFF;
		}
	}
	.account-top{
		width: 100%;
		height: 367rpx;
		background: linear-gradient(-45deg, #0180FF 0%, #369BFF 100%);
		.contenttop{
			margin-left: 40rpx;
			text{
				font-size: 73rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				&:nth-child(1){
					padding: 20rpx 0;
					display: block;
					font-size: 37rpx;
					font-weight: 500;
				}
			}
		}
		.contentwrap{
			width: 100%;
			display: flex;
			justify-content: space-around;
			.content{
				margin-top: 40rpx;
				width: 50%;
				text-align: center;
				text{
					font-size: 41rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					&:nth-child(1){
						display: block;
						font-size: 37rpx;
						
					}
				}
			}
		}
		
	}
}
</style>
